<template>
    <div class="left-top-container">
        <div ref="chartRef" class="chart-container"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { graphic } from 'echarts/core'
const chartRef = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

// 电池占比数据
const batteryData = ref([
    { value: 15, name: '共享' },
    { value: 8, name: '外卖' },
    { value: 4, name: '社区' },
    { value: 10, name: '无人配送' }
])


const initChart = () => {
    if (!chartRef.value) return

    chartInstance = echarts.init(chartRef.value)

    const option = {
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                return params.seriesName + '<br/>' + params.name + ': ' + Math.floor(params.percent) + '%';
            }
        },
        legend: {
            width: '80%',
            orient: 'horizontal',
            right: 'center',
            bottom: '3%',
            textStyle: {
                color: '#fff',
                fontSize: 12
            },
            itemWidth: 10,
            itemHeight: 10,
        },
        series: [
            {
                name: '电量占比',
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 5,
                    borderColor: '#233343',
                    borderWidth: 2,
                    // color: function(params: any) {
                    //     // 根据数值大小设置不同颜色
                    //     const colors = [
                    //     ['#FF6B6B', '#FF8E8E'],
                    //     ['#4ECDC4', '#7FDBDA'],
                    //     ['#45B7D1', '#74C7EC'],
                    //     ['#96CEB4', '#B8E6C1'],
                    //     ['#FECA57', '#FFD93D'],
                    //     ['#A8E6CF', '#C8F7C5'],
                    //     ['#FFB6C1', '#FFC0CB']
                    //     ]
                    //     const colorPair = colors[params.dataIndex % colors.length]
                    //     return new graphic.LinearGradient(0, 0, 0, 1, [
                    //     {
                    //         offset: 0,
                    //         color: colorPair[0]
                    //     },
                    //     {
                    //         offset: 1,
                    //         color: colorPair[1]
                    //     }
                    //     ])
                    // },
                },
                // label: {
                //   show: true,
                //   position: 'center'
                // },
                label: {
                    show: true,
                    color: '#fff',
                    textBorderWidth: 0,
                    textBorderColor: 'transparent',
                    formatter: function(params) {
                        return params.name + ': ' + Math.floor(params.percent) + '%';
                    },
                    position: 'outside'
                },
                labelLine: {
                    show: true
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold',
                        color: '#fff'
                    }
                },
                data: batteryData.value,
//                 color: function(params: any) {
//   //           // 根据数值大小设置不同颜色
//                     const colors = [
//                     ['#FF6B6B', '#FF8E8E'],
//                     ['#4ECDC4', '#7FDBDA'],
//                     ['#45B7D1', '#74C7EC'],
//                     ['#96CEB4', '#B8E6C1'],
//                     ['#FECA57', '#FFD93D'],
//                     ['#A8E6CF', '#C8F7C5'],
//                     ['#FFB6C1', '#FFC0CB']
//                     ]
//                     const colorPair = colors[params.dataIndex % colors.length]
//                     return new graphic.LinearGradient(0, 0, 0, 1, [
//                     {
//                         offset: 0,
//                         color: colorPair[0]
//                     },
//                     {
//                         offset: 1,
//                         color: colorPair[1]
//                     }
//                     ])
//                 },
                color: ['#4A90E2', '#50E3C2', '#F5A623', '#E84393', '#9B59B6']
            },
            // {
            //     name: '中心标签',
            //     type: 'pie',
            //     radius: ['0%', '35%'],
            //     center: ['50%', '50%'],
            //     silent: true,
            //     label: {
            //         show: true,
            //         position: 'center',
            //         color: '#fff',
            //         fontSize: 14,
            //         formatter: function(params) {
            //             return params.name + '\n' + Math.floor(params.percent) + '%';
            //         }
            //     },
            //     labelLine: {
            //         show: false
            //     },
            //     data: batteryData.map(item => ({
            //         ...item,
            //         itemStyle: {
            //             color: 'transparent'
            //         }
            //     }))
            // }
        ]
    }

    chartInstance.setOption(option)
}

const resizeChart = () => {
    if (chartInstance) {
        chartInstance.resize()
    }
}

onMounted(() => {
    setTimeout(() => {
        initChart()
    }, 100)
    window.addEventListener('resize', resizeChart)
})

onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose()
    }
    window.removeEventListener('resize', resizeChart)
})

const init = (module: any) => {
    let data = JSON.parse(module)
    if (module) {
        batteryData.value.forEach((item: any) => {
            if(item.name == '共享'){
                item.value = Number(data.shared)
            }else if(item.name == '外卖'){
                item.value = Number(data.takeaway)    
            }else if(item.name == '社区'){
                item.value = Number(data.community)
            }else if(item.name == '无人配送'){
                item.value = Number(data.unmannedDelivery)
            }
        })
    }
}

defineExpose({
    init
})
</script>

<style scoped lang="less">
.left-top-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chart-container {
    flex: 1;
    width: 100%;
    min-height: 200px;
}
</style>